<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/layui.css" tppabs="css/layui.css"  media="all">
<meta name="viewport"  charset="utf-8" content="width=device-width,initial-scale=1.0,user-scalable=0">
</head>
<title>
文字修仙
</title>
<style>
/* 小屏幕手机端 */
			@media (min-width: 0px) and (max-width:768px) {
				.div1{
					width: 100px;
					height: 100px;
					background-color: red;
				}
			}
			
			/* 中等屏幕（桌面显示器，大于等于 992px） */
			@media (min-width: 768px) and (max-width:992px){
				.div1{
					width: 300px;
					height: 300px;
					background-color: blue;
				}
			}
			
			/* 大屏幕（大桌面显示器，大于等于 1200px） */
			@media (min-width: 992px) {
				.div1{
					width: 500px;
					height: 500px;
					background-color: aqua;
				}
			}
body{
  background-color:black;
  color:#01aaed;  
}
#cen{
 padding-top:70px;
}
#login{
width:15%;
height:200px;
}
#jc{
cols:10;
rows:60;
width:50%;
height:30%;
}
#zml{
color:white;
}
#zmlcode{
color:white;
}
#jdt{
 width:30%;
}
</style>
<body>
<center>
<div id="cen">
<h1>欢迎界面</h1>
<br/>
<br/>
<diV>
<span>你好：尊敬的 ADMIN 用户</span>
<br/>
<br/>
<span>
<h3>境界:<p style="color:white"id="jj"></p></h3>
</span>
<br/>
<span>
金钱
</span>

<span>
灵石
</span>
<span>
灵兽
</span>
<span>
装备
</span>
<br/>
<br/>
<br/>
<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
<span>
当前经验：
<br/>
<div class="layui-progress layui-progress-big" lay-filter="test" id="jdt" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-green" id="jdtone" lay-percent="50%"></div>
</div>
</span>
<br/>
<br/>
<br/>
<span>
当前拥有招募令：<p id="zml"></p>
</span>
<span>
当前拥有招募积分：<p id="zmlcode"></p>
</span>
<span>
<button id="add" onclick="add()" type="button" class="layui-btn layui-btn-warm">添加经验</button>
</span>
<br/>
<br/>
<span>
<button id="tp" onclick="tp()" type="button" class="layui-btn layui-btn-warm">突破</button>
</span>
<br/>
<br/>
<span>
<button id="cq" onclick="cq()" type="button" class="layui-btn layui-btn-normal">抽奖</button>
<button id="slc" onclick="slc()" type="button" class="layui-btn layui-btn-normal">十连抽</button>
<button id="addcq" onclick="addcq()" type="button" class="layui-btn layui-btn-normal">增加招募令</button>
<button id="addzml" onclick="addzml()" type="button" class="layui-btn layui-btn-normal">增加一百招募令</button>
<button id="dh" onclick="dh()" type="button" class="layui-btn layui-btn-normal">兑换</button>
<button id="tz" onclick="tz()" type="button" class="layui-btn layui-btn-normal">跳转</button>
</span>
<br/>
<br/>
<span>
<textarea name=""  id="jc"  required lay-verify="required" placeholder="" class="layui-textarea"></textarea>
</span>
</div>
</div>
</center>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="layui.js" charset="utf-8"></script>
 <script>
 
    var arrays = ['【黄金】西域圣僧','【黄金】东土高僧','【钻石】齐天大圣','【铂金】东瀛刀客','【钻石】鞘膜掌门','【铂金】唐门执法','【黄金】东岸玄人','【黄金】青鸟刺客','【黄金】欧贤'
   ,'【黄金】刺目西','【黄金】六方寸','【黄金】假道人','【钻石】吐蕃法轮王','【至尊】剑宗宗主','【黄金】门徒','【黄金】许愿人','【黄金】桀护法','【黄金】爽真人','【黄金】天灵上人','【黄金】神算子','【铂金】合欢殿主','【钻石】疯魔道人','【黄金】太盛国王','【黄金】北方剑客','【黄金】阿蛮','【至尊】玄圣手'
   ];
 
 var layer = layui.layer;
 
  var element;
 //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  element = layui.element;
});
 
   // 初始化境界
   var jj = window.localStorage.getItem("jj");
     if(jj==null){
	window.localStorage.setItem("jj","凡人一重");
	 jj = "凡人一重";
  }
  
  document.getElementById("jj").innerHTML = jj;
  
  var jy = window.localStorage.getItem("jy");
  if(jy==null){
   window.localStorage.setItem("jy",0);
  }
 
  // document.getElementById("jy").innerHTML = jy;
  //初始化数量
   var zmlnum = window.localStorage.getItem("zml");
  if(zmlnum==null || zmlnum == 'NaN'){
	window.localStorage.setItem("zml",0);
	 zmlnum = 0
  }
  document.getElementById("zml").innerHTML = zmlnum;
  
  var zmlcodenum = window.localStorage.getItem("zmlcode");
  if(zmlcodenum==null){
   window.localStorage.setItem("zmlcode",0);
	 zmlcodenum = 0
  }
  document.getElementById("zmlcode").innerHTML = zmlcodenum;
  
 
  function add(){
  // 获取当前经验
   var jy = window.localStorage.getItem("jy");
   var newJy = Number(jy)+1000;
   window.localStorage.setItem("jy",newJy);
    layer.alert("新增经验1000点",{icon:0});
   document.getElementById("jy").innerHTML=newJy;
   element.progress('test', '10%');
 }
 
 function tp(){
       layer.alert("经验不足",{icon:0});
 }
  function cq(){
	restartNum();
   if(zmlnum<=0){
	  layer.alert("招募令不足",{icon:0});
	  return false;
   }

   
   var size = arrays.length;
   
   var data = Number(Math.round(Math.random()*(size-1-0)+0));
   layer.alert("当前奖池数量:"+size+">>>> \n\r 恭喜你！抽到:"+arrays[data],{icon:0});
   var jc = document.getElementById("jc").value;
   document.getElementById("jc").value = jc+">>>>>>\n"+arrays[data];
   window.localStorage.setItem("zml",Number(zmlnum)-1);
   window.localStorage.setItem("zmlcode",Number(zmlcodenum)+10);
   restartNum();
   restartZml();
   return;
 }
 
 function slc(){
   restartNum();
   if(zmlnum<=0){
	  layer.alert("招募令不足",{icon:0});
	  return false;
   }
   
   var size = arrays.length;
   var data = "";
   var str = "当前奖池数量:";
   var jc = document.getElementById("jc").value;
   for(var i=0;i<10 ;i++){
       data = Number(Math.round(Math.random()*(size-1-0)+0));
	   str+= ">>>> \n\r 恭喜你！抽到:"+arrays[data]+"\n\r"
	   
   }
   document.getElementById("jc").value = jc+">>>>>>\n"+str;
   layer.alert(str,{icon:0});
   
   window.localStorage.setItem("zml",Number(zmlnum)-10);
   window.localStorage.setItem("zmlcode",Number(zmlcodenum)+100);
   restartNum();
   restartZml();
   return;
 }
 
 function addcq(){
 window.localStorage.setItem("zml",Number(zmlnum)+1);
 restartNum();
 restartZml();
 }
 
  function addzml(){
 window.localStorage.setItem("zml",Number(zmlnum)+100);
 restartNum();
 restartZml();
 }
 
  function dh(){
	layer.alert("兑换暂未开发");	
 }
 
 function restartNum(){
 zmlnum = window.localStorage.getItem("zml");
  zmlcodenum = window.localStorage.getItem("zmlcode");
 }
 
  function restartZml(){
	document.getElementById("zml").innerHTML = zmlnum;
  document.getElementById("zmlcode").innerHTML = zmlcodenum;
 }
 
function tz(){
window.location.href="mainmeuns.html"
}
 </script>
</html>